<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <title>登录页</title>
        <jsp:include page="lbi/css.jsp"></jsp:include>
        <link rel="stylesheet" href="<c:url value="/static/css/user/login.css"/>" />
        <style type="text/css">
        </style>
    </head>
    <body>
        <div class="wrap">
            <!-- 头部开始-->
            <header>
                <div class="header common">
                    <ul class="left fl">
                        <li class="commones">
                            <a class="fl" href="#">欢迎您！</a>
                        </li>
                        <li class="name">
                            <!--登录前显示请登录-->
                            <a href="<c:url value="/toLogin"/>" class="selected-color">请登录</a>
                        </li>
                        <li>或</li>
                        <li class="register">
                            <a href="<c:url value="/toRegister"/>"><span class="selected-color">轻松注册</span></a>
                        </li>
                    </ul>

                    <ul class="right fr">
                        <li>
                            <a href="#"><img width="20px" height="20px" src="static/img/phone.png"/> 客服热线 ： 0512-67229422 (8:30-17:30)</a>
                        </li>
                    </ul>
                </div>
            </header>
            <!-- 头部结束-->
            <!--导航开始-->
            <nav class="nav">
                <div class="common">
                    <div class="left fl logo"><img src="static/img/logo.png"></div>
                    <div class="center fl" style="margin-left:50px;">
                        <ul class="fl">
                            <li>
                                	登录
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!--导航结束-->
            <div class="banner">
            <!--用户登录表单-->
            <div class="loginWrapper login common block" id="login">
                <div class="login_d">
                    <h1><span class="active">账号密码登录</span><span>手机号动态登录</span></h1>
                    <!--账号密码登录-->
                    <div class="login-style block">
                        <form>
                        	<div class="input_box">
								<input class="users_d  entry_tel" type="text" placeholder="请输入手机号" id="user_name" maxlength="11" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
	onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}">
								<i class="icon_username"></i>
								 <p class="errorTip" id="user_error" style="display: none;">请正确输入用户名和密码</p>
							</div>
                         	<div class="input_box">
								<input class="users_d login_password" type="password" id="password" placeholder="密码" name="password">
								<i class="icon_password"></i>
								<p class="errorTip passwordError" id="pwd_error" style="display: none;">密码不能为空！</p>
							</div>
                            <label class="fl login-password-rb">
                                <input type="checkbox" id="rememberpass">记住密码
                            </label>
                            <a href="<c:url value="/toFindpwd.do"/>" target="_blank" class="wj-password selected-color fr">忘记密码?</a>
                            <input type="button" value="登录" class="btn-green login_button" style="cursor: pointer;" /> 
                        </form>
                        
                        <div class="login_others">
                            <!--<a href="#" class="qq" title="qq登录"><img src="static/img/qq.png" alt="">&nbsp;&nbsp;QQ</a>
                            <a href="#" class="wx" title="weixin登录"><img src="static/img/wx.png" alt="">&nbsp;&nbsp;微信</a>-->
                            <input type="submit" id="register_submit_0" value="免费注册››" class="selected-color fr">
                        </div>
                    </div>
                    <!--账号登录-->
                    <div class="login-style">
                      	<form>
							<div class="input_box">
								<input class="users_d  entry_tel inputClass" type="text" placeholder="请输入手机号" name="extend_field5" id="entry_tel1" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
	onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" >
								<i class="icon_username"></i>
								<p class="errorTip">请正确输入用户名！</p>
							</div>
							
							<div class="input_box">
								<div class="clearfix">
									<input type="text" value="" placeholder="请输入右侧验证码" class="input-val fl inputClass" />
		        					<canvas id="canvas" width="100" height="40"></canvas>
		        					<a href="javascript:void(0)" class="btn_change">看不清楚？</a>
	        					</div>
	        					<p class="errorTip">验证码错误！</p>
        					</div>
        					<div class="input_box">
        					<input class="users_d login_password inputClass pw" type="password" id="password1" placeholder="请输入短信验证码" name="password">
        					<input class="send_code" type="button" onclick="settime(this)" value="获取短信验证码">
        					<p class="errorTip">短信验证码错误！</p>
        					</div>
							<input type="submit" value="登录" class="btn-green login_button">	
						</form>
                        
                        <div class="login_others">
                            <!--<a href="#" class="qq" title="qq登录"><img src="static/img/qq.png" alt="">&nbsp;&nbsp;QQ</a>
                            <a href="#" class="wx" title="weixin登录"><img src="static/img/wx.png" alt="">&nbsp;&nbsp;微信</a>-->
                            <input type="button" id="register_submit_1" value="免费注册››" class="selected-color fr">
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
            <div style="height: 50px;"></div>
                <footer class="common">
                <div class="footer-top">
                    <ul>
                        <li class="plqq">
                            <span class="icon"></span>
                            <h1>品种规格齐全</h1>
                        </li>
                        <li class="zzbz">
                            <span class="icon"></span>
                            <h1>质量可靠保障</h1>
                        </li>
                        <li class="jgyz">
                            <span class="icon"></span>
                            <h1>价格占有优势</h1>
                        </li>
                        <li class="qqbt">
                            <span class="icon"></span>
                            <h1>缺钱可打白条</h1>
                        </li>
                        <li class="mfzc">
                            <span class="icon"></span>
                            <h1>免费找货找车</h1>
                        </li>
                    </ul>
                </div>
                <div class="footer-bottom">
                    <h1 class="common tc">Copyright©right;2018 www.zaishengwang.com Inc. All rights reserved</h1>
                    <h2 class="common tc">苏ICP证161025号 | 苏ICP备15001001号 | 再生网</h2>
                </div>
            </footer>
        </div>
        <script type="text/javascript">
        $(document).ready(function(){
        	draw(show_num);   
 	    	$("#canvas , .btn_change").on('click', function() {
 	    		draw(show_num);
 	    	})
        	
        	var prevLink = document.referrer;
//          登录方式切换
            $('#login h1 span').click(function(){
                //选项卡按钮样式切换
                $('.login h1 span').removeClass('active');
                $(this).addClass('active');
                //切换内容
                $('.login-style').removeClass('block');
                $('.login-style').eq($(this).index()).addClass('block');
                $('.sm_phone').show(1000).delay(3000).hide(1000);
            });
            
            $('.login_button').click(function(){
                   var regMobile = /^1\d{10}$/;
                   var val_num = $('.entry_tel').val();
                   if (val_num == "") {
                	   $("#user_error").css('display','block');
                       $("#user_error").html("手机号不能为空");
                       return false;
                   }else if (!regMobile.test(val_num)){
                	   $("#user_error").css('display','block');
                       $("#user_error").html("请输入正确手机号");
                       return false;
                   }else{
                	   $("#user_error").css('display','none');
                   }
                   
                   var val_pw = $('.login_password').val();
                   if (val_pw == "") {
                	   $("#pwd_error").css('display','block');
                       $("#pwd_error").html("密码不能为空");
                       return false;
                   }else {
                	   $("#pwd_error").css('display','none');
                   }
                   
                   var userName = $("#user_name").val();
                   var password = $("#password").val();
                   var chkLogin = $("#rememberpass").val();
                   $.ajax({
                       type: "post",
                       url: "<c:url value="/login.do"/>",
                       data: {
                           userName : userName,
                           password : password,
                           chkLogin : chkLogin
                       },
                       cache:false,
                       dataType: "json",
                       success: function(data){
                           if (data.msg == 1) {
                               $("#user_error").css('display','none');
                               location.href = prevLink;
                           }else if (data.msg == 2) {
                               $("#pwd_error").css('display','block');
                               $("#pwd_error").html("密码错误，请重新输入");
                           }else {
                               $("#user_error").css('display','block');
                               $("#user_error").html("手机号不存在，请重新输入");
                           }
                       }
                   })
                });
          });
        </script>
    </body>
</html>
